<template>
  <div id="testts" @click="color='black'" :style="{'background-color': color}">
    <div>{{ xixiCount }}</div>
    <div>counter:{{ counter.count }}
    <button @click="up">up</button></div>
    <span>{{str}}</span>
    <button @click="sayMyName">say my name</button>
    <button @click="showLegCount">showLegCount</button>
  </div>
  <TransitionGroup id="list" name="list" tag="div">
    <div v-for="(v) in arr" :key="v">{{ v }}</div>
  </TransitionGroup>
  <button @click="add">添加</button>
  <button @click="del">删除</button>
  <div class="xixi" @mouseenter="bXixi=false" @mouseleave="bXixi=true">
    <TransitionGroup class="group" name="list" tag="div">
      <div v-if="bXixi" key="0" style="background-color: brown;" @click="bXixi=false">嘻嘻</div>
      <div @click="bXixi=true" key="1">哈哈</div>
    </TransitionGroup>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue';

const arr = reactive(<string[]>[])

function add() {
  arr.unshift(arr.length+'')
}
function del() {
  arr.shift()
}

const bXixi = ref(true)





// import { useCounterStore } from "../stores/counter";
import { useCounterStore } from "../stores";
import { storeToRefs } from "pinia";
const counter = useCounterStore()
// const {count} = toRefs(counter)
const {count,xixiCount} = storeToRefs(counter)
const color = ref('aqua')
function up() {
  count.value ++
  counter.count ++
  counter.$patch({count:counter.count+1})
  counter.$patch(store=>{
    store.count ++
  })
  counter.$state = {count:666}
}
counter.$subscribe((mutation,state)=>{
  console.log('onStateEvent');
  console.log(mutation,state);
  state.count ++
})
const hello : string = 'hello word';
// const value0 = 'const value'
const str = ref(hello)

class Dog {
  name = '';
  static legCount = 4;
  constructor(name:string) {
    this.name = name
  }
  sayName(){
    console.log(`my name is ${this.name}`);
    str.value = `my name is ${this.name}`
    console.log(this);
  }
  static showLegCount(){
    console.log(`number of legs: ${this.legCount}`);
    str.value = `number of legs: ${this.legCount}`
    console.log(this);
    
  }
}

const dog0 = new Dog('海森堡')
const sayMyName = ():void=>{
  dog0.sayName()
}
const showLegCount = ():void=>{
  Dog.showLegCount()
}

// let xArr: [string, number];
// xArr = ['',1]

// enum Color {Red, Green, Blue};
// console.log(Color,Color[Color.Red]);

// // <type> 等同 as type
// let str0 = '0s'
// let num0:number = <any>str0;
// let num1:number = str0 as any;
// console.log(num0,num1);

// console.log(dog0 instanceof Dog);
// console.log(dog0 instanceof Object);
// console.log(typeof dog0);
// console.log(typeof Dog);

// const arr0 = [1,2,'3']
// for (const e of arr0) {
//   console.log(e);
// }
// const bool = arr0.every((e,idx,arr)=>{
//   console.log(e,idx,arr);
//   return typeof(e)=='number'
// })
// console.log(bool);
// const newArr = arr0.filter((e,idx,arr)=>{
//   console.log(e,idx,arr);
//   return typeof(e)=='number'
// })
// console.log('newArr',newArr);
// const newArr1 = arr0.map((e)=>{
//   return e+'1'
// })
// console.log('newArr1',newArr1);

// function func(...params:[string]) {
//   console.log(params);
  
// }
// func('')

// let arr1 = ([1,2,3] as (number|string)[]).concat(['4'])

// let map = new Map<string,string|number>([
//   ['a','A'],
//   ['b','B'],
//   ['c',0],
// ])
// for (const [k,v] of map) {
//   console.log(k,v);
// }
// for (const entry of map.entries()) {
//   console.log(entry[0],entry[1]);
// }
// interface IDog {
//   name : string;
//   sayName():void;
// }
// class NewDog implements IDog {
//   name: string = '';
//   sayName(): void {
//     console.log(this.name);
    
//   }
// }
// let dog1:NewDog = {
//   name:'dog1',
//   sayName(){},
// }
// dog1.sayName()
// if (dog1 instanceof NewDog) {
  
// }

// namespace spaceA {
//   export class ClassA{
    
//   }
// }
// namespace spaceB {
//   export class ClassA{
    
//   }
// }
// let obj = new spaceA.ClassA()
// let obj1 = new spaceB.ClassA()

</script>

<style lang="less" scoped>
@import url(testts.less);
</style>